<script setup>
import { baseURL } from '../utils/env';
import { defineEmits,watch,computed } from 'vue';
import { useUserIdStore } from '../stores/user';
import {insertFeedbackApi} from '../api/index.js'
const userIdStore = useUserIdStore();
const props = defineProps({
    photo: {
        type: Object,
        default: () => ([])
    }
})

  const user = computed(() => {
  return userIdStore.user;
});
const emit = defineEmits(['toDetail'])
const toDetail = () => {
    console.log('点击事件触发')
    emit('toDetail')
}
const photoList = props.photo||[];
const clickLike = () => {
    if(photoList.islike[0].count === 0){
        let data = {
            wallId:photoList.id,
            userId:user.value,
            type:1,
            moment:new Date(),
        }
        console.log(data);
        insertFeedbackApi(data).then((res)=>{
            console.log(res);
            //反馈成功后，更新卡片数据
            photoList.islike[0].count++;
            photoList.like[0].count++;
        })
    }
}
watch(
    () => userIdStore.user,
    (newUser, oldUser) => {
      if (newUser) {
        clickLike();
      }
    }
  );
</script>

<template>
<div class="photo-card">
    <!-- 显示主图片内容 -->
    <img :src="baseURL + photoList.imgurl" alt="" class="photo-img" />
    <!-- 半透明遮罩层，用于触发点击事件 -->
    <div class="photo-bg" @click="toDetail"></div>
    <!-- 点赞按钮 -->
    <div class="photo-like" @click="clickLike">
        <span class="iconfont icon-xin" :class="{islike:photoList.islike[0].count > 0}"></span>
        <span class="like-data">{{ photoList.like[0].count }}</span>
    </div>
</div>
</template>

<style lang="less" scoped>
@import "../assets/fonts/icon/iconfont.css";
.photo-card{
    position: relative;
    .photo-img{
        width: 100%;
    }
     .photo-bg{
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.2);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: @tr;
     }
     .photo-like{
        position: absolute;
        top: @padding-12;
        left: @padding-12; 
        background: @gray-10;
        border-radius: 20px;
        height: 28px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
        opacity: 0;
        transition: @tr;
        cursor: pointer;
        .icon-xin{
            color: @gray-3;
            margin-right: @padding-4;
        }
        .islike{
                color: #F67770;
           }
        .like-data{
            font-size: @font-size-14;
            line-height:10px;
           color: @gray-1; 
        }
     }
     &:hover{
        .photo-bg{
            opacity: 1;
        }
       .photo-like{
            opacity: 1;
        }
     }
}
</style>
